<template>
    <div class="root">
        <ul class="lists">
            <li @click="changepage(-1)" v-if="current != 1">←</li>
            <li v-if="satranend.start > 1" @click="changepage(1)"> 1</li>
            <li v-if="satranend.start > 2">...</li>
            <template v-for="index in satranend.end">
                <li @click="changepage(index)" v-if="index >= satranend.start" :class="{ active: index == current }">{{
                    index }}
                </li>
            </template>
            <li v-if="page - 1 > satranend.end">...</li>
            <li v-if="page > satranend.end" @click="changepage(page)">{{ page }}</li>
            <li @click="changepage(0)" v-if="page != current">→</li>
        </ul>
    </div>
</template>

<script setup>
import { computed, ref, defineEmits } from 'vue';
let props = defineProps({
    /*总共多少条数据  */
    totalsize: {
        type: Number,
        default: 3,
    },
    /* 当前的页码 */
    current: {
        type: Number,
        default: 1,
    },
    /* 一页几条 */
    size: {
        type: Number,
        default: 10,
    },
})
const emit = defineEmits(['changepages'])
function changepage(index) {
    if (index == 0) {
        emit('changepages', props.current + 1)
    } else if (index == -1) {
        emit('changepages', props.current - 1)
    } else {
        emit('changepages', index)
    }
}
/* 计算连续的开始和结束的位置 */
let satranend = computed(() => {
    let start = 0;
    let end = 0;
    if (page.value < 3) {
        start = 1
        end = page.value
    } else {
        end = props.current + 1;
        start = props.current - 1;
    }
    if (start <= 1) {
        start = 1;
        end = 3;
    }
    if (end >= page.value) {
        end = page.value;
        start = props.current - 1;
    }
    return { start, end }
})
let page = computed(() => {

    return Math.ceil(props.totalsize / props.size)
})
</script>

<style lang="scss" scoped>
.active {
    @include userTheme {
        background-color: getThemeValue("bottomColor") !important;
    }

    color: #fff;
}

.root {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;

}

.lists {

    height: 100%;

    display: flex;

}

.lists li {
    height: 30px;
    width: 30px;

    @include userTheme {
        background-color: getThemeValue("bottomColorhover");
    }

    border-radius: 50%;
    display: flex;
    align-items:center;
    justify-content: center;
    cursor: pointer;
    margin: 0 5px;
}
</style>